<!DOCTYpE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragments :: head(~{::title})">
		<title>归档页</title>
	</head>
	<body>
		<!--导航-->
		<nav th:replace="_fragments :: menu(4)"></nav>
		
		<!--中间内容-->
		<div class="m-container-small m-padded-tb-big">
			<div class="ui container">
				<!--header-->
				<div class="ui top attached padded segment">
					<div class="ui middle aligned two column grid">
						<div class="column">
							<h3 class="ui teal header" style="color: #A9BCF5 !important;">归 档</h3>
						</div>
						<div class="right aligned column">
							共  <h2 class="ui orange header m-inline-blok m-text-spaced" th:text="${blogCount}" >20</h2> 篇
						</div>
					</div>
				</div>
				<!--content-->
				<th:block th:each="item :${archiveMap}">
					<h2 class="ui center aligned header" th:text="${item.key}" >2017</h2>

					<div class="ui fluid vertical menu">
						<a  th:href="@{/blog/{id}(id=${blog.id})}" href="#" th:each="blog : ${item.value}"  class="item">
							<span>
								<i class="mini teal circle icon"></i><span th:text="${blog.title}">关于为人处世</span>
								<div class="ui teal basic left pointing label m-padded-mini m-text-thin" th:text="${#dates.format(blog.createTime,'MMMdd')}">9月03</div>
							</span>
							<div class="ui orange basic left pointing label m-padded-mini m-text-thin" th:text="${blog.flag}">原创</div>
						</a>

					</div>
				</th:block>
				<!--/*-->
				<h2 class="ui center aligned header">2016</h2>
				
				<div class="ui fluid vertical menu">
					<a  href="#" target="_blank" class="item">
						<span>
							<i class="mini teal circle icon"></i>关于为人处世
							<div class="ui teal basic left pointing label m-padded-mini m-text-thin">9月03</div>
						</span>
						<div class="ui orange basic left pointing label m-padded-mini m-text-thin">原创</div>
					</a>
					<a  href="#" target="_blank" class="item">
						<span>
							<i class="mini teal circle icon"></i>关于为人处世
							<div class="ui teal basic left pointing label m-padded-mini m-text-thin">9月03</div>
						</span>
						<div class="ui orange basic left pointing label m-padded-mini m-text-thin">原创</div>
					</a>
					<a  href="#" target="_blank" class="item">
						<span>
							<i class="mini teal circle icon"></i>关于为人处世
							<div class="ui teal basic left pointing label m-padded-mini m-text-thin">9月03</div>
						</span>
						<div class="ui orange basic left pointing label m-padded-mini m-text-thin">原创</div>
					</a>
					<a  href="#" target="_blank" class="item">
						<span>
							<i class="mini teal circle icon"></i>关于为人处世
							<div class="ui teal basic left pointing label m-padded-mini m-text-thin">9月03</div>
						</span>
						<div class="ui orange basic left pointing label m-padded-mini m-text-thin">原创</div>
					</a>
				</div>
				<!--*/-->

				<!--<div class="ui bottom attached segment">
					<div class="ui middle aligned two column grid">
						<div class="left aligned column">
							<a href="#" class="ui mini teal basic button">上一页</a>
						</div>
						<div class="right aligned column">
							<a href="#" class="ui mini teal basic button">下一页</a>
						</div>
					</div>
				</div>-->
			
			
			
			
			</div>
		</div>
		<br/>
		<br/>
		<br/>
		<!--底部-->
		<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive"></footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script>
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});

		</script>
	</body>
</html>
